<template>
  <div class="h-full">
    <loading-empty-wrapper :loading="loading" :empty="empty">
      <n-form class="no-rule-form" size="small" label-placement="left" :show-feedback="false" inline>
        <n-space vertical :size="[4, 4]">
          <n-space :size="[4, 4]">
            <n-form-item label="单据日期" path="A_BILLDATE">
              <n-date-picker
                v-model:formatted-value="formModel.A_BILLDATE"
                type="date"
                value-format="yyyy/MM/dd"
                format="yyyy/MM/dd"
                class="w-120px"
              />
            </n-form-item>
            <n-form-item label="备注" path="A_REMARK" label-width="60">
              <n-input v-model:value="formModel.A_REMARK" style="width: 800px" />
            </n-form-item>
          </n-space>
          <n-space :size="[20, 0]">
            <n-text class="text-14px">单据编号: {{ formModel.A_BILLNO }}</n-text>
            <n-text class="text-14px">处理部门: {{ formModel.A_DEPTID_DEPTNAME }}</n-text>
            <n-text class="text-14px">供应商名称: {{ formModel.A_OBJID_CUSTNAME }}</n-text>
            <n-text class="text-14px">移动电话: {{ formModel.A_OBJID_MOBILETEL }}</n-text>
            <n-text class="text-14px">入库(单): {{ formModel.A_INCOUNT }}</n-text>
            <n-text class="text-14px">发票号码: {{ formModel.A_INVOICENO }}</n-text>
            <n-text class="text-14px">退货(单): {{ formModel.A_OUTCOUNT }}</n-text>
            <n-text class="text-14px">供应商备注: {{ formModel.A_SUPREMARK }}</n-text>
            <n-text class="text-14px">处理状态: {{ statusNames[formModel.A_TJSTATUS] }}</n-text>
            <n-text class="text-14px">入库金额: {{ formModel.A_AMOUNT }}</n-text>
            <n-text class="text-14px">结算金额: {{ formModel.A_JSAMOUNT }}</n-text>
            <n-text class="text-14px">差异金额: {{ formModel.A_CYAMOUNT }}</n-text>
            <n-text class="text-14px">损耗扣款金额: {{ formModel.A_JSKKAMOUNT1 }}</n-text>
            <n-text class="text-14px">促销扣款金额: {{ formModel.A_JSKKAMOUNT2 }}</n-text>
            <n-text class="text-14px">调整金额: {{ formModel.A_JSKKAMOUNT3 }}</n-text>
            <n-text class="text-14px">应开票金额: {{ formModel.A_KPAMOUNT }}</n-text>
            <n-text class="text-14px">其他扣款金额: {{ formModel.A_KKAMOUNT }}</n-text>
            <n-text class="text-14px">应付金额: {{ formModel.A_APAMOUNT }}</n-text>
          </n-space>
          <n-space :size="[4, 4]">
            <n-form-item>
              <n-button type="primary" attr-type="button"><icon-bx:save />提交</n-button>
            </n-form-item>
            <n-form-item>
              <n-button><icon-mdi:reload />刷新结算价</n-button>
            </n-form-item>
          </n-space>
        </n-space>
      </n-form>
    </loading-empty-wrapper>
    <ul class="info-data">
      <li v-for="(item, index) in infoData" :key="index">
        <span>{{ item[0] }}:</span>
        <span>{{ item[1] || '-' }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useDateFormat } from '@vueuse/core';
import { fetchPurchaseDetail } from '@/service';
import { useBillContext } from '@/context';
import { useLoadingEmpty } from '@/hooks';

const { useInject } = useBillContext();
const { billNo } = useInject();

// 初始加载
const { loading, startLoading, endLoading, empty } = useLoadingEmpty();

// 初始表单
function createDefaultFormModel(): any {
  return {
    A_BILLDATE: null,
    A_BILLNO: null,
    A_DEPTID_DEPTNAME: null,
    A_OBJID_CUSTNAME: null,
    A_OBJID_MOBILETEL: null,
    A_INCOUNT: null,
    A_REMARK: null,
    A_INVOICENO: null,
    A_OUTCOUNT: null,
    A_SUPREMARK: null,
    A_TJSTATUS: null,
    A_AMOUNT: null,
    A_JSAMOUNT: null,
    A_CYAMOUNT: null,
    A_JSKKAMOUNT1: null,
    A_JSKKAMOUNT2: null,
    A_JSKKAMOUNT3: null,
    A_KPAMOUNT: null,
    A_KKAMOUNT: null,
    A_APAMOUNT: null
  };
}

const statusNames: any = {
  0: '未提交',
  1: '已提交',
  2: '已退回',
  3: '受理通过'
};

// 处理接口数据
const formModel = reactive(createDefaultFormModel());
const infoData = ref<any>([]);
function setDataSource(data: any) {
  Object.assign(formModel, data);
  infoData.value = [
    ['制单人', data.A_LISTERID_STAFFNAME],
    ['提交人', data.A_TJUSER_STAFFNAME],
    ['提交日期', data.A_TJTIME ? useDateFormat(data.A_TJTIME, 'YYYY/MM/DD').value : null],
    ['受理人', data.A_SLUSER_STAFFNAME],
    ['受理日期', data.A_SLTIME ? useDateFormat(data.A_SLTIME, 'YYYY/MM/DD').value : null],
    ['审核人', data.A_CONFIRMPERSIONID_STAFFNAME],
    ['审核日期', data.A_CONFIRMDATE ? useDateFormat(data.A_CONFIRMDATE, 'YYYY/MM/DD').value : null]
  ];
}

// 获取接口数据并处理加载状态
async function getDataSource() {
  startLoading();
  const { data } = await fetchPurchaseDetail(billNo.value);
  if (data) {
    setDataSource(numToStr(data));
    endLoading();
  }
}

function numToStr(data: any) {
  for (const x in data) {
    if (data[x] === '') {
      data[x] = null;
    } else if (typeof data[x] === 'number') {
      data[x] = String(data[x]);
    }
  }
  return data;
}
onMounted(() => {
  getDataSource();
});
</script>

<style scoped>
.info-data {
  font-size: 12px;
  line-height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  width: calc(100% - 560px);
  height: 50px;
  left: 15px;
  bottom: 0;
  z-index: 1;
}

.info-data li {
  float: left;
  vertical-align: middle;
  margin-right: 15px;
}

.info-data li span {
  display: inline-block;
  white-space: nowrap;
}

.info-data li span:first-child {
  margin-right: 5px;
}
</style>
